<template>
	<view class="wrap">
		<stitcky v-if="isShow">
			<view class="shortcut">
				<u-grid :border="false" :col="2">
					<u-grid-item @click="toggle">
						<image class="home-icon" src="../../../static/aidex/images/home_start.png"></image>
						<view class="grid-text">上工</view>
					</u-grid-item>

					<!-- 	<u-grid-item @click="navTo('/pages/sys/workbench/add-form')">
						<image class="home-icon" src="../../../static/aidex/images/home_alarm.png"></image>
						<view class="grid-text">呼叫</view>
					</u-grid-item> -->
					<u-grid-item @click="navTo('/pages/sys/home/components/stop_record/index')">
						<image class="home-icon" src="../../../static/aidex/images/home_history.png"></image>
						<view class="grid-text">停机记录</view>
					</u-grid-item>
				</u-grid>
				<u-tabs :offset="[5, 90]" :list="tabList" :is-scroll="false" :current="navIndex" @change="switchTab"></u-tabs>
			</view>
		</stitcky>
		<stitcky v-else>
			<view class="shortcut">
				<u-grid :border="false" :col="4">
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/inventory-inquiry/inventory_inquiry')">
						<image class="home-icon" src="../../../static/aidex/images/pic1.png"></image>
						<view class="grid-text">库存查询</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/buy-store/buy_store_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic2.png"></image>
						<view class="grid-text">采购入库</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/buy-return/buy_return_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic3.png"></image>
						<view class="grid-text">采购退货</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/production-get/production_get_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic4.png"></image>
						<view class="grid-text">生产领料</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/production-back/production_back_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic5.png"></image>
						<view class="grid-text">生产退料</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/product-storage/product_storage_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic6.png"></image>
						<view class="grid-text">产品入库</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/sale-return/sale_return_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic7.png"></image>
						<view class="grid-text">销售出库</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/sale-back/sale_back_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic8.png"></image>
						<view class="grid-text">销售退货</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/other-in/other_in_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic2.png"></image>
						<view class="grid-text">其他入库</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/other-out/other_out_list')">
						<image class="home-icon" src="../../../static/aidex/images/pic7.png"></image>
						<view class="grid-text">其他出库</view>
					</u-grid-item>
					<!-- 	<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/move_store')">
						<image class="home-icon" src="../../../static/aidex/images/pic9.png"></image>
						<view class="grid-text">移库</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/inventory_verification')">
						<image class="home-icon" src="../../../static/aidex/images/pic10.png"></image>
						<view class="grid-text">库存盘点</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/box-manage/container_management')">
						<image class="home-icon" src="../../../static/aidex/images/pic11.png"></image>
						<view class="grid-text">装箱管理</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pages/sys/home/components/work_bench/sn_code')">
						<image class="home-icon" src="../../../static/aidex/images/pic12.png"></image>
						<view class="grid-text">SN码</view>
					</u-grid-item> -->
				</u-grid>
				<u-tabs :offset="[5, 90]" :list="tabList1" :is-scroll="false" :current="navIndex" @change="switchTab"></u-tabs>
			</view>
		</stitcky>
		<view class="report-nav" v-if="isShow">
			<!-- :status=["PREPARE","APPROVING"] -->
			<verify-work-list
				@updataWorkReport="refreshLoadDataUnApprovingReports(true)"
				@deleteWorkReport="refreshLoadDataUnApprovingReports(true)"
				:work-list="prepareAndApprovingReports"
				v-if="navIndex == 0"
			></verify-work-list>
			<!-- :status=["APPROVED","FINISHED"] -->
			<verify-work-list
				:work-list="approvedAndFinishedReports"
				@updataWorkReport="refreshLoadDataApprovingReports(true)"
				@deleteWorkReport="refreshLoadDataApprovingReports(true)"
				:navStatus="navIndex"
				v-if="navIndex == 1"
			></verify-work-list>
		</view>
		<view class="report-nav" v-else>
			<!--  :status=["PREPARE","APPROVING"] -->
			<dispose-work-list
				@updataWorkReport="refreshLoadDataUnApprovingReports(true)"
				@deleteWorkReport="refreshLoadDataUnApprovingReports(true)"
				:work-list="prepareAndApprovingReports"
				v-if="navIndex == 0"
			></dispose-work-list>
			<!-- :status=["APPROVED","FINISHED"] -->
			<dispose-work-list
				:work-list="approvedAndFinishedReports"
				@updataWorkReport="refreshLoadDataApprovingReports(true)"
				@deleteWorkReport="refreshLoadDataApprovingReports(true)"
				:navStatus="navIndex"
				v-if="navIndex == 1"
			></dispose-work-list>
			<!-- 	<uni-load-more
				iconType="auto"
				:content-text="{
					contentdown: '向上滑动，加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多...'
				}"
				:status="loadStatus"
			></uni-load-more> -->
		</view>
	</view>
</template>
<script>
import VerifyWorkList from './components/verify_work_list/index.vue';
import DisposeWorkList from './components/dispose_work_list/index.vue';
import stitcky from './components/u-sticky.vue';

const PAGE_SIZE = 10;
export default {
	components: {
		VerifyWorkList,
		stitcky,
		DisposeWorkList
	},
	data() {
		return {
			navIndex: 0,
			loadStatus: 'more',
			/**
			 *  more	加载前
			   loading	加载中
			   no-more	没有更多数据
			 * **/
			tabList: [{ name: '未审核通过', count: 0 }, { name: '已审核通过', count: 0 }],
			tabList1: [{ name: '未处理单据', count: 0 }, { name: '已处理单据', count: 0 }],
			allWorkReports: [],

			prepareAndApprovingReports: [], //未审核通过列表
			prepareAndApprovingPageNumber: 1,
			berforePrepareAndApprovingPageNumber: 1,
			prepareAndApprovingTotal: 0,

			approvedAndFinishedReports: [], //已审核通过列表
			approvedAndFinishedPageNumber: 1,
			berforeApprovedAndFinishedPageNumber: 1,
			approvedAndFinishedTotal: 0,

			isShow: true
		};
	},
	onLoad() {
		// 根据不同角色显示不同页面
		console.log(this.vuex_user.roles);
		this.$nextTick(() => {
			//判断该用户是否有仓库管理员这个角色
			if (this.vuex_user.roles.some(item => item.roleKey == 'warehouse')) {
				this.isShow = false;
			} else {
				this.isShow = true;
			}
		});

		let url = 'ws://' + this.vuex_host + ':' + this.vuex_port + '/websocket/message/' + this.vuex_token;
		this.$websocket.initSocket(url);

		uni.$on('updataReportList', () => {
			this.refreshLoadDataUnApprovingReports(true);
		});
		// this.initQrcodeEvent();
		uni.showLoading({
			title: '加载中...',
			icon: 'none'
		});
		this.loadStatus = 'loading';
		Promise.all([
			this.$u.api.feedback.listUnApproved({
				userName: this.vuex_user.userName,
				pageNum: this.prepareAndApprovingPageNumber,
				pageSize: PAGE_SIZE
			}),
			this.$u.api.feedback.listApproved({
				userName: this.vuex_user.userName,
				pageNum: this.approvedAndFinishedPageNumber,
				pageSize: PAGE_SIZE
			}),
			this.$u.api.workstation.getBindWorkstation({
				userName: this.vuex_user.userName
			})
		])
			.then(res => {
				uni.hideLoading();
				const resReports = res[0]?.rows || [];
				this.prepareAndApprovingReports.splice(0, this.prepareAndApprovingReports.length, ...resReports);
				this.prepareAndApprovingTotal = res[0]?.total || 0;
				this.tabList[0].count = this.prepareAndApprovingTotal;
				const resUnReports = res[1]?.rows || [];
				this.approvedAndFinishedReports.splice(0, this.approvedAndFinishedReports.length, ...resUnReports);
				this.approvedAndFinishedTotal = res[1]?.total || 0;
				this.tabList[1].count = this.approvedAndFinishedTotal;
				const workStation = res[2].data || {};
				if (this.navIndex == 1) {
					if (this.approvedAndFinishedReports.length >= this.approvedAndFinishedTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
				}
				if (this.navIndex == 0) {
					if (this.prepareAndApprovingReports.length >= this.prepareAndApprovingTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
				}
				if (workStation && workStation.workstationCode) {
					this.$u.vuex('vuex_bind_workstation_code', workStation.workstationCode);
				} else {
					this.$u.vuex('vuex_bind_workstation_code', '');
				}
			})
			.catch(e => {
				console.log(e);
				if (this.navIndex == 0) {
					if (this.approvedAndFinishedReports.length >= this.approvedAndFinishedTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
				}
				if (this.navIndex == 1) {
					if (this.prepareAndApprovingReports.length >= this.prepareAndApprovingTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
				}
				uni.hideLoading();
			});
	},

	mounted() {},
	onReachBottom() {
		console.log('到达底部了');
		if (this.navIndex == 0) {
			this.refreshLoadDataUnApprovingReports(true);
		}
		if (this.navIndex == 1) {
			this.refreshLoadDataApprovingReports(true);
		}
	},
	onPullDownRefresh() {
		console.log('刷新了');
		if (this.navIndex == 0) {
			this.refreshLoadDataUnApprovingReports(true);
		}
		if (this.navIndex == 1) {
			this.refreshLoadDataApprovingReports(true);
		}
	},
	methods: {
		toggle() {
			if (!this.vuex_bind_workstation_code) {
				uni.navigateTo({
					url: './components/select_site_popu/index'
				});
				console.log(111);
			} else {
				uni.navigateTo({
					url: '/pages/sys/build_product/index?' + this.vuex_bind_workstation_code
				});
				console.log(222);
			}
		},
		// 未审核通过
		refreshLoadDataUnApprovingReports(isRefrsh) {
			if (isRefrsh) {
				this.prepareAndApprovingPageNumber = 1;
			} else {
				if (this.prepareAndApprovingReports.length >= this.prepareAndApprovingTotal) {
					return;
				}
				this.prepareAndApprovingPageNumber += 1;
			}

			uni.showLoading({
				title: '加载中...',
				mask: true
			});

			this.$u.api.feedback
				.listUnApproved({
					userName: this.vuex_user.userName,
					pageNum: this.prepareAndApprovingPageNumber,
					pageSize: PAGE_SIZE
				})
				.then(res => {
					const resReports = res?.rows || [];
					if (this.prepareAndApprovingPageNumber == 1) {
						this.prepareAndApprovingReports.splice(0, this.prepareAndApprovingReports.length, ...resReports);
					} else {
						this.prepareAndApprovingReports.push(...resReports);
					}

					this.prepareAndApprovingTotal = res?.total || 0;
					this.tabList[0].count = this.prepareAndApprovingTotal;
					if (this.prepareAndApprovingReports.length >= this.prepareAndApprovingTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
					this.berforePrepareAndApprovingPageNumber = this.prepareAndApprovingPageNumber;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
				.catch(err => {
					console.log(err);
					this.prepareAndApprovingPageNumber = this.berforePrepareAndApprovingPageNumber;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
		},
		// 已审核通过
		refreshLoadDataApprovingReports(isRefresh) {
			if (isRefresh) {
				this.approvedAndFinishedPageNumber = 1;
			} else {
				if (this.approvedAndFinishedReports.length >= this.approvedAndFinishedReports) {
					return;
				}
				this.approvedAndFinishedPageNumber += 1;
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$u.api.feedback
				.listApproved({
					userName: this.vuex_user.userName,
					pageNum: this.approvedAndFinishedPageNumber,
					pageSize: PAGE_SIZE
				})
				.then(res => {
					const resReports = res?.rows || [];
					if (this.approvedAndFinishedPageNumber == 1) {
						this.approvedAndFinishedReports.splice(0, this.approvedAndFinishedReports.length, ...resReports);
					} else {
						this.approvedAndFinishedReports.push(...resReports);
					}
					this.approvedAndFinishedTotal = res?.total || 0;
					this.tabList[1].count = this.approvedAndFinishedTotal;
					if (this.approvedAndFinishedReports.length >= this.approvedAndFinishedTotal) {
						this.loadStatus = 'no-more';
					} else {
						this.loadStatus = 'more';
					}
					this.berforeApprovedAndFinishedPageNumber = this.approvedAndFinishedPageNumber;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				})
				.catch(err => {
					console.log(err);
					this.approvedAndFinishedPageNumber = this.berforeApprovedAndFinishedPageNumber;
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		initQrcodeEvent() {
			// #ifdef APP-PLUS
			const globalEvent = uni.requireNativePlugin('globalEvent');
			globalEvent.addEventListener('qrcodeResultEvent', e => {
				uni.navigateBack({ delta: 1 });
				console.log('qrRespone' + JSON.stringify(e));
				uni.showToast({
					title: JSON.stringify(e),
					icon: 'none'
				});
			});
			// #endif
		},

		switchTab(index) {
			this.navIndex = index;
			if (this.navIndex == 0) {
				if (this.approvedAndFinishedReports.length >= this.approvedAndFinishedTotal) {
					this.loadStatus = 'no-more';
				} else {
					this.loadStatus = 'more';
				}
			}
			if (this.navIndex == 1) {
				if (this.prepareAndApprovingReports.length >= this.prepareAndApprovingTotal) {
					this.loadStatus = 'no-more';
				} else {
					this.loadStatus = 'more';
				}
			}
		}
	}
};
</script>
<style lang="scss">
@import 'index.scss';
.wrap {
	padding-top: 10rpx;
}
.home-icon {
	width: 70rpx;
	height: 70rpx;
}
</style>
